<template>
	<view class="footprint">
		<!--日历控件-->
		<rf-calendar
				class="date"
				:insert="true"
				:lunar="true"
				:start-date="'2019-3-2'"
				:end-date="'2019-5-20'"
				@change="handleDateChange"
		/>
		<!--足迹列表-->
		<rf-swipe-action>
			<rf-swipe-action-item
					:options="options"
					:info="item"
					@action="bindClick"
					class="uni-list-cell"
					:key="index"
					v-for="(item, index) in footPrintList">
				<view class="uni-media-list" @tap="navTo(`/pages/product/product?id=${item.product.id}`)">
					<image class="uni-media-list-logo"
					       mode="aspectFill"
					       @error="onImageError(index)"
					       :src="item.product && item.product.picture"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{ item.product && item.product.name }}</view>
						<view class="uni-media-list-text-bottom">
							<text class="price">{{ item.product && item.product.minPriceSku.price }}</text>
							<text>{{ item.created_at | time }}</text>
						</view>
					</view>
				</view>
			</rf-swipe-action-item>
		</rf-swipe-action>
		<!--足迹列表为0-->
		<view v-if="footPrintList.length === 0" class="empty">
			<image class="empty-content-image" :src="empty" mode="aspectFit"></image>
			<text class="empty-content-text">这一天没有足迹哦</text>
		</view>
		<rf-load-more v-else :status="loadingType"/>
		<!--加载动画-->
		<rf-loading v-if="loading"></rf-loading>
	</view>
</template>

<script>
    /**
     * @des 我的足迹
     *
     * @author stav stavyan@qq.com
     * @date 2019-11-22 10:47
     * @copyright 2019
     */
    import {footPrintDel, footPrintList} from "@/api/userInfo";
    import rfLoadMore from '@/components/rf-load-more/rf-load-more';
    import errorImg from '@/static/errorImage.jpg';
    import rfCalendar from "@/components/rf-calendar/rf-calendar";
    import rfSwipeAction from '@/components/rf-swipe-action/rf-swipe-action';
    import rfSwipeActionItem from '@/components/rf-swipe-action-item/rf-swipe-action-item';
    import moment from '@/utils/moment';

    export default {
        components: {
            rfLoadMore,
            rfCalendar,
            rfSwipeAction,
            rfSwipeActionItem
        },
        data() {
            return {
                footPrintList: [],
                errorImg: errorImg,
                page: 1,
                loadingType: 'more',
                token: null,
                startTime: moment().startOf('day').format('X'),
                endTime: moment().endOf('day').format('X'),
                options: [
                    {text: '删除', style: {backgroundColor: '#fa436a'}}
                ],
                loading: true,
                empty: ''
            };
        },
        filters: {
            // 时间格式化
            time(val) {
                return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        onLoad() {
            this.initData();
        },
        methods: {
            // 监听日期变化
            async handleDateChange(e) {
                this.page = 1;
                this.footPrintList = [];
                if (parseInt(e.type) !== 0) {
                    this.startTime = await moment(`${e.year}-${e.month}-${e.date} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').valueOf() / 1000;
                    this.endTime = await moment(`${e.year}-${e.month}-${e.date + 1} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').valueOf() / 1000;
                } else {
                    this.startTime = undefined;
                    this.startTime = undefined;
                }
                this.loading = true;
                this.getFootPrintList();
            },
            // 删除足迹
            async bindClick(e) {
                await this.$del(`${footPrintDel}?id=${e.data.id}`, {
                    page: this.page
                }).then(() => {
                    this.$api.msg('删除足迹成功');
                    this.page = 1;
                    this.footPrintList.length = 0;
                    this.getFootPrintList();
                });
            },
            // 数据初始化
            initData() {
                this.token = uni.getStorageSync('accessToken') || undefined;
                if (this.token) {
                    this.getFootPrintList();
                }
            },
            // 获取我的足迹列表
            async getFootPrintList() {
                const params = {};
                params.page = this.page;
                if (this.startTime && this.endTime) {
                    params.start_time = this.startTime,
                        params.end_time = this.endTime
                }
                await this.$get(`${footPrintList}`, {
                    ...params
                }).then(r => {
                    this.loading = false;
                    this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
                    this.footPrintList = [...this.footPrintList, ...r.data];
                }).catch(() => {
                    this.loading = false;
                });
            },
            // 图片异常处理
            onImageError(index) {
                this.footPrintList[index].product.picture = this.errorImg;
            },
            // 跳转至商品详情
            navTo(url) {
                uni.navigateTo({
                    url
                })
            },
        }
    }
</script>

<style lang='scss' scoped>
	.footprint {
		background: $page-color-base;
		height: 100vh;
		
		.uni-list-cell {
			margin: 10upx 0;
		}
		
		.empty {
			text-align: center;
			margin-top: 120upx;
			
			.empty-content-image {
				width: 200upx;
				height: 200upx;
			}
			
			.empty-content-text {
				display: block;
				font-size: $font-color-light;
			}
		}
	}
	
	.uni-list {
		/*margin-top: 20upx;*/
	}
	
	.uni-media-list-logo {
		width: 240upx;
		height: 180upx;
	}
	
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 74upx;
		font-size: 28upx;
		overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.price {
		font-size: $font-base;
		color: $font-color-dark;
		
		&:before {
			content: '￥';
			font-size: $font-sm;
			margin: 0 2upx 0 8upx;
		}
	}
</style>
